import React from 'react';
import { Toast,Picker,List  } from 'antd-mobile'

import UEditor from '../component/UEditor';
import moment from 'moment'
import { connect } from 'react-redux';

import { getCheckPersonal, postCommitContent } from '../common/service'
import { saveData } from '../action/UserAction'
import NoPowerShow from '../component/NoPowerShow'

class ConstructionEquire extends React.Component {
	constructor(props){
		super(props)
		this.state = {
			textEquipment: [{value:{id:1,name:'锤子'},label:'锤子'}], //可选设备数组
			carNum: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.planInfoRes.vehicleNum.toString() : '0',	//车辆数量
			personalNum: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.planInfoRes.personNum.toString() : '0',	//人员数量
			equipmentArr: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.planInfoRes.deviceIds : [], //选择设备，数量数组
			constructionPlanEdit: false, //施工计划编辑状态
			constructionCarEdit: false,  //施工计划车辆编辑状态
			constructionPeopleEdit: false,  //施工计划人员编辑状态
			defaultPick: {id: '', name: '请选择设备'}, //选择设备的默认提示
			equipmentNum: '', //填写的设备数量
			constructionText: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.planInfoRes.constructionContent[0].content : '', //施工计划文档
			planId: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.planInfoRes.planId : null,
			constructionTextArr: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.planInfoRes.constructionContent : []
		}
	}

	componentWillUnmount() {
		console.log(123)
	}
	
	endEdit() {
		const {constructionCarEdit, constructionPeopleEdit, personalNum, carNum,constructionText} = this.state;
		if (constructionCarEdit) {
			Toast.info('请保存车辆数量', 2);
			return;
		}
		if (constructionPeopleEdit) {
			Toast.info('请保存人员数量', 2);
			return;
		}
		if (carNum.trim().length === 0) {
			Toast.info('车辆数量不能为空', 2);
			return;
		}
		if (personalNum.trim().length === 0) {
			Toast.info('人员数量不能为空', 2);
			return;
		}
		this.setState({constructionPlanEdit: false})
	}

	changeEditStatu(type) {
		const {carNum, personalNum, constructionCarEdit, constructionPeopleEdit} = this.state;
		if (type === 'car') {
			if (constructionCarEdit && carNum.length > 0 &&  !/^\+?[0-9][0-9]*$/.test(carNum.trim())) {
				Toast.info('请输入有效数字', 2);
				return;
			}
			this.setState({constructionCarEdit: !this.state.constructionCarEdit})
		}else if (type === 'personal') {
			if (constructionPeopleEdit && personalNum.length > 0 &&  !/^\+?[0-9][0-9]*$/.test(personalNum.trim())) {
				Toast.info('请输入有效数字', 2);
				return;
			}
			this.setState({constructionPeopleEdit: !this.state.constructionPeopleEdit})
		}
	}
	completeForm() {
		const {constructionCarEdit, constructionPeopleEdit, personalNum, carNum,constructionText} = this.state;
		return (carNum.trim().length === 0 || personalNum.trim().length === 0 || constructionText.trim().length === 0 ) 
	}
	commit() {
		const { constructionCarEdit, constructionPeopleEdit, personalNum, carNum,constructionText} = this.state;
		if (this.completeForm.call(this)) {
			Toast.info('请补全施工计划', 2);
			return;
		}
		const { showLoadModal, hideLoadModal } = this.props;
		showLoadModal();
		postCommitContent({
			deviceIds: this.state.equipmentArr,  //设备数组
			flowId: this.props.userReducer.flowId,  //流程Id
			personNum: this.state.personalNum, //人员数量
			vehicleNum: this.state.carNum,
			constructionContent: this.state.constructionTextArr,
			planId: this.state.planId
		})
		.then((data) => {
			const isOK = data.data;
			if (isOK.success) {
				this.commitCheck();
			} else {
				hideLoadModal();
				Toast.info(isOK.msg, 2);
			}
		})
		.catch((e) => {
			hideLoadModal();
			console.log(e);
			Toast.info('服务器异常', 2);
		})
		
	}
	commitCheck() {

		getCheckPersonal(flowId)
		.then((data) => {
			this.props.hideLoadModal();
			const isOK = data.data;
			if (isOK.success) {
				this.props.dispatch(saveData(isOK.obj));
				this.props.currentPage(isOK.obj.flowBaseInfo.flowProcesses);
			} else {
				Toast.info(isOK.msg, 2);
			}
		})
		.catch((e) => {
			this.props.hideLoadModal();
			console.log(e);
			Toast.info('服务器异常', 2);
		})
	}

	render() {
		//施工计划确认页面
		const {carNum, personalNum, equipmentArr, constructionText,constructionTime,constructionUnit, constructionControlUnit,executiveManager,sceneManager,techResponsibility,safeResponsibility,safeOfficer,applyDate} = this.state;
		if (!this.state.constructionPlanEdit) {
			return (
				<div style={{padding: '1.42rem 0.2rem 0.4rem 0.2rem'}}>
					<div>
						<span className='num-title' style={{marginTop: '0.8rem'}}>车辆数量</span>
						<span style={{fontSize: '0.32rem',color: '#0e8dea'}}>{carNum}</span>
						<span className='equipment-title'>设备</span>
						{equipmentArr.map((data, index) => {
							return (
								<div style={{paddingLeft: '0.15rem', marginBottom: '0.2rem'}} key={index}>
									<span style={{fontSize: '0.32rem',marginRight:'0.4rem', color: '#ccc'}}>{data.commonName}</span>
									<span style={{fontSize: '0.32rem',color: '#0e8dea'}}>{data.commonNum}</span>
								</div>
							);
						})}
						<div style={{marginTop: '0.54rem'}}>
							<span className='num-title'>人员数量</span>
							<span style={{fontSize: '0.32rem',color: '#0e8dea'}}>{personalNum}</span>
						</div>
						<div style={{marginTop: '0.8rem'}}>
							<p className='num-title' style={{marginBottom: '0.32rem'}}>施工计划文档</p>
							<UEditor id="content" height="200" toolbars={[]} disabled={true} value={this.state.constructionText}/>  
						</div>
					</div>
					<div className='btnCommitConstruction' style={{backgroundColor: '#434A57'}}>
						<div 
							id='inputEditBtnEquire'
							className='btnEdit'
							onTouchStart={()=>{document.getElementById('inputEditBtnEquire').style.backgroundColor = '#B7B9B9'}}
							onTouchEnd={()=>{document.getElementById('inputEditBtnEquire').style.backgroundColor = '#ccc'}}
							onClick={() => this.setState({constructionPlanEdit: true})}
						>
							编辑
						</div>
						<div 
							id='inputCommitBtns'
							className='btnCommit'
							onTouchStart={()=>{document.getElementById('inputCommitBtns').style.backgroundColor = '#D97442'}}
							onTouchEnd={()=>{document.getElementById('inputCommitBtns').style.backgroundColor = '#FFA24A'}}
							onClick={()=>this.commit()}
						>
							确认完毕
						</div>
					</div>
				</div>
			);
		} 
		//施工计划编辑页面
		return (
			<div style={{padding: '1.23rem 0.2rem 0.8rem 0.2rem'}}>
				<div>
					<div className='select-num-div' style={{marginTop: '0rem'}}>
						<div>
							<span style={{fontSize: '0.32rem',marginRight: '0.2rem'}}>车辆数量</span>
							<input type='text' className='num-input' style={{border: `1px solid ${this.state.constructionCarEdit ? '#0e8dea' : '#434A57'}`}}
								disabled={this.state.constructionCarEdit ? false : true}
								value={this.state.carNum}
								onChange={(e)=>this.setState({carNum: e.target.value})}
							/>
						</div>
						<div 
							className='select-btn'
							id='carNumBtn'
							onClick={()=> this.changeEditStatu('car')}
						>
								{ this.state.constructionCarEdit ? 
									'保存' : '编辑'
								}
						</div>
					</div>
					<p style={{fontSize:'0.32rem',marginTop:'0.54rem',marginBottom:'0.3rem'}}>设备选择</p>
					<div style={{marginBottom: '0.36rem'}}>
						{this.state.equipmentArr.map((data, index)=> {
							return (
								<div key={index} style={{height:'0.72rem',backgroundColor:'#bababa',display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom: '0.16rem'}}>
									<div style={{display:'flex', marginLeft: '0.12rem'}}>
										<span style={{fontSize:'0.32rem',color:'#333',marginRight:'0.4rem'}}>{data.commonName}</span>
										<span style={{fontSize:'0.32rem',color:'#0e8dea'}}>{data.commonNum}</span>
									</div>
									<div
										style={{backgroundColor:'#909090', borderRadius: '0px',height:'0.72rem', width: '0.72rem',display:'flex',justifyContent:'center',alignItems:'center'}}
										onClick={() => {
											const equipmentArrArr = this.state.equipmentArr;
											equipmentArrArr.splice(index,1);
											this.setState({equipmentArr: equipmentArrArr});
										}}
									>
										<i className='fa fa-trash-o' style={{color:'#7F0000'}}></i>
									</div>
								</div>
							);
						})}
					</div>
					<div style={{display:'flex'}}>
						<div className='equipmentPicker' style={{position:'relative',color: '#666'}}>
							<Picker ref='picker' data={this.state.textEquipment} cols={1} extra={this.state.defaultPick.name}
								onOk={(data) => {
									console.log(123)
									console.log(data);
									if (data && data.length === 1)
									 this.setState({defaultPick: data[0]})
								}}
							>
			          <List.Item arrow="horizontal"></List.Item>
			        </Picker>
						</div>
						<input type='text' style={{fontSize: '0.27rem'}} className='numEquipmentInput' placeholder='数量'
						 onChange={(e)=>{this.setState({equipmentNum: e.target.value})}}
						 value={this.state.equipmentNum}
						/>
						<div
							style={{height:'0.72rem',backgroundColor:'#d9d9d9',borderRadius:'0px',flex: 1,display:'flex',justifyContent:'center',alignItems:'center',lineHeight:'0.72rem',color: '#666',fontSize:'0.24rem',fontWeight:'bold'}}
							icon={<span className='addIcon'></span>}
							onClick={()=>{
								if (this.state.defaultPick.id === '') {
									Toast.info('请选择设备', 1);
									return;
								}
								if (this.state.equipmentNum.trim() === '') {
									Toast.info('请填写数量', 1);
									return;
								}
								if (!/^\+?[1-9][0-9]*$/.test(this.state.equipmentNum.trim())) {
									Toast.info('请输入有效数字', 2);
									return;
								}
								let flag = false;
								for (let obj of equipmentArr) {
									if (obj.commonId === this.state.defaultPick.id) {
										obj.commonNum = this.state.equipmentNum
										flag = true;
										break;
									}
								}
								if (!flag) {
									equipmentArr.push({
										commonId: this.state.defaultPick.id,
										commonName: this.state.defaultPick.name,
										commonNum: this.state.equipmentNum
									});
								}
								console.log(equipmentArr);
								this.setState({
									equipmentArr: equipmentArr,
									defaultPick: {id: '', name: '请选择设备'},
									equipmentNum: ''
								})
							}}
						>
							添加
						</div>
					</div>
					<div className='select-num-div'>
						<div>
							<span style={{fontSize: '0.32rem',marginRight: '0.2rem'}}>人员数量</span>
							<input type='text' className='num-input' style={{border: `1px solid ${this.state.constructionPeopleEdit ? '#0e8dea' : '#434A57'}`}}
								disabled={this.state.constructionPeopleEdit ? false : true}
								value={this.state.personalNum}
								onChange={(e)=>this.setState({personalNum: e.target.value})}
							/>
						</div>
						<div 
							className='select-btn'
							id='personalNumBtn'
							onClick={()=> this.changeEditStatu('personal')}
						>
								{ this.state.constructionPeopleEdit ? 
									'保存' : '编辑'
								}
						</div>
					</div>
				</div>
			
				<div 
					id='comfireBtnEquire'
					className='ConstructionEditBtn'
					onTouchStart={()=>{document.getElementById('comfireBtnEquire').style.backgroundColor = '#D97442'}}
					onTouchEnd={()=>{document.getElementById('comfireBtnEquire').style.backgroundColor = '#FFA24A'}}
					onClick={()=>{
						this.endEdit()
					}}
					>
					确认
				</div>
			</div>
		);
	}
}



function mapStateToProps(state) {
  const { userReducer } = state;
  return {
    userReducer
  };
}

export default connect(mapStateToProps)(ConstructionEquire);